<template>
  <label :class="'ee-tag ' + colorString" @click="eeui.mb && $emit('close', tag)">
    <slot></slot>
    <template v-if="closable">&nbsp;<ee-shape v-if="closable" shape="close" :class="_tagClass"
                @click="$emit('close', tag)" /></template><template v-else />
  </label>
</template>

<script type="text/javascript">
import { withDefault } from '../__mixin/color';
import { classString } from '../__use/dom';

export default {
  name: "ee-tag",
  mixins: [withDefault('', 1, 1, 0, 1)],
  emits: {
    /** 点击关闭组件时触发
     * @param {*} tag - props.tag 的数据
     */
    onClose: (tag) => true,
  },
  props: {
    /** 是否可点击关闭标签
     * 
     * 手机版点击整个 tag 都可以触发关闭，毕竟手机版关闭太小了
     */
    closable: Boolean,
    /** 保存在组件的任意数据 */
    tag: Object,
  },
  computed: {
    _tagClass() {
      const { color, plain } = this.$props;
      return classString({ color, label: 1, button: 1, plain }, 'eec')
    }
  },
}
</script>

<style lang="scss">
.ee-tag {
  display: inline-flex;
  align-items: center;
  padding: .25em .5em;
  border-radius: .25em;
  font-size: .8125em;
  // white-space: nowrap;
  // 外部flex时，自己也不会被拉长，这个和justify-content只能选择1个效果
  width: max-content;
  // 外部flex时，会被拉长，此时文字和关闭按钮居于两侧
  justify-content: space-between;

  > i.ee-shape.close {
    font-size: 0.8125em;
    padding: .25em;
    border-radius: 50%;
    margin-right: -.25em;
  }
}
</style>